import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./toolMask.module.less";
import { Button, Tooltip, TooltipProps } from "antd";
import FabricImage from "@/myFabric/FabricImage";

// 遮罩按钮
export default function ToolMask() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [clipSvgUrl, setClipSvgUrl] = useState(editorStore.clipSvgUrl);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    setDisable(lock);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }

    setClipSvgUrl(editorStore.clipSvgUrl);
  }), []);

  //设置遮罩
  const setClicPath = (svgurl: string = "") => {
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObject && activeObject.type === "image") {
      (activeObject as FabricImage).setClicPath(svgurl);
    }
    editorStore.setClipSvgUrl(svgurl);
  }

  const tooltipProps: TooltipProps = {
    overlayInnerStyle: {
      backgroundColor: 'white',
    },
    onOpenChange(visible) {
      setHover(visible);
    },
    color: 'white',
    trigger: 'click',
    placement: 'topLeft',
  };

  const maskList = [
    "/clipSvg/mask-01.svg",
    "/clipSvg/mask-02.svg",
    "/clipSvg/mask-03.svg",
    "/clipSvg/mask-04.svg",
    "/clipSvg/mask-05.svg",
    "/clipSvg/mask-06.svg",
    "/clipSvg/mask-07.svg",
    "/clipSvg/mask-08.svg",
    "/clipSvg/mask-09.svg",
    "/clipSvg/mask-10.svg",
    "/clipSvg/mask-11.svg",
    "/clipSvg/mask-12.svg",
    "/clipSvg/mask-13.svg",
    "/clipSvg/mask-14.svg",
    "/clipSvg/mask-15.svg",
    "/clipSvg/mask-16.svg",
    "/clipSvg/mask-17.svg",
    "/clipSvg/mask-18.svg",
  ];

  return (
    <Tooltip
      title={
        <>
          <div className={styles.maskList} >
            {
              maskList.map((item, index) => {
                return <img
                  key={index}
                  className={clsx(clipSvgUrl === item && styles.active, styles.maskItem)}
                  src={item}
                  onClick={() => setClicPath(item)}
                />
              })
            }
          </div>
          <Button
            size="small"
            danger
            block
            type="primary"
            onClick={() => setClicPath("")}
            style={{ marginTop: 10 }}
          >取消遮罩</Button>
        </>
      }
      {...tooltipProps}
    >
      <div
        ref={dom}
        className={clsx(
          styles.toolMask,
          visible && styles.visible,
          disable && styles.disable,
          clipSvgUrl && styles.hover
        )}
      >
        遮罩
      </div>
    </Tooltip>


  );

}
